import 'dart:html';

import 'package:flutter/material.dart';

class DataCard extends StatelessWidget {
  
  final double? width;
  final double? height;
  final Map<String, dynamic> params;
  
  const DataCard(
      {Key? key,
        required this.params,
        this.width,
        this.height,
      }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            offset: Offset(4, 4),
            blurRadius: 4,
          ),
        ],
        border: Border.all(color: Colors.black26, width: 1.0),
      ),
      constraints: BoxConstraints(
        maxWidth: width ?? double.infinity,
        maxHeight: height ?? double.infinity,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children:
          params.entries.map((entry) => _item(entry.key, entry.value)).toList(),
      ),
    );
  }

  Widget _item(String title, String? value) {
    return Expanded(
      child: Center(
        child: Row(
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(
                  left: 16
              ),
              child: Text(
                title,
                style: TextStyle(
                  color: Colors.black87,
                  fontSize: 24,
                ),
              ),
            ),
            Expanded(
              child: Container(
                alignment: Alignment.centerLeft,
                margin: EdgeInsets.only(
                    left: 24
                ),
                child: Text(
                  value ?? '',
                  style: TextStyle(
                    color: Colors.black87,
                    fontSize: 24,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class TextCard extends StatelessWidget {

  final String text;

  const TextCard(
      {Key? key,
        required this.text
      }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        text,
        style: TextStyle(
          fontSize: 18,
          color: Colors.black87,
        ),
      ),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black26, width: 1),
        borderRadius: BorderRadius.circular(12),
      ),
    );
  }
}

class DataWithResourceCard extends StatelessWidget {

  double? width;
  double? height;
  final Map<String, String> params;

  DataWithResourceCard(
      {Key? key,
        this.width,
        this.height,
        required this.params,
      }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            offset: Offset(4, 4),
            blurRadius: 4,
          ),
        ],
        border: Border.all(color: Colors.black26, width: 1.0),
      ),
      constraints: BoxConstraints(
        maxWidth: width ?? double.infinity,
        maxHeight: height ?? double.infinity,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children:
        params.entries.map((entry) => _item(
            entry.key, entry.value, entry.value.contains('http'))).toList(),
      ),
    );
  }

  Widget _item(String title, String value, bool isResource) {
    return Center(
      child: Row(
        children: [
          Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.symmetric(
              horizontal: 24,
              vertical: 16,
            ),
            child: Text(
              title,
              style: TextStyle(
                color: Colors.black87,
                fontSize: 24,
              ),
            ),
          ),
          Expanded(
            child: Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.symmetric(
                horizontal: 24,
                vertical: 16,
              ),
              child: !isResource
                  ? Text(
                value,
                style: TextStyle(
                  color: Colors.black87,
                  fontSize: 24,
                ),
              )
                  : ClipRRect(
                borderRadius: BorderRadius.circular(5),
                child: Image.network(
                  value,
                  width: 200,
                  height: 150,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}